<template>
  <div class="classification">
      <div class="header">
          <div class="left">
            <router-link to="/index" class="ret iconfont icon-fanhui"></router-link>
          </div>
            <div class="hotView">
                <div>热门景点</div>
            </div>
        </div>
        <div class="pics">
            <router-link to="/town" class="picItem">
                <div class="textHead">
                    <div class="left">广州塔</div>
                    <div class="right">
                        <span>前往购票</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>
                <div class="img">
                    <img src="../../public/imgs/cl1.jpg" alt="">
                </div>
            </router-link>
            <router-link to="/snow" class="picItem">
                <div class="textHead">
                    <div class="left">融创雪世界</div>
                    <div class="right">
                        <span>前往购票</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>
                <div class="img">
                    <img src="../../public/imgs/cl5.jpg" alt="">
                </div>
            </router-link>
            <router-link to="/white" class="picItem">
                <div class="textHead">
                    <div class="left">白水寨</div>
                    <div class="right">
                        <span>前往购票</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>
                <div class="img">
                    <img src="../../public/imgs/cl6.jpg" alt="">
                </div>
            </router-link>
            <router-link to="/river" class="picItem no">
                <div class="textHead">
                    <div class="left">珠江夜游</div>
                    <div class="right">
                        <span>前往购票</span>
                        <span class="iconfont icon-arrow-right"></span>
                    </div>
                </div>
                <div class="img">
                    <img src="../../public/imgs/cl7.png" alt="">
                </div>
            </router-link>
        </div>
  </div>
</template>

<script>

export default {
  components: {
  }
}
</script>

<style lang="less">
    .classification{
        background-color: #f5f5f5;
        width: 100vw;
        a{
            color: black;
            &:active{
            color: black;
            }
        }
         .header{
                background-color: white;
                padding: 0px 20px;
                height: 40px;
                line-height: 40px;
                .left{
                    float: left;
                    color: gray;
                }
                .hotView{
                    color: black;
                }
        }
        .pics{
            display: flex;
            flex-direction: column;
            width: 100vw;
            .picItem{
                margin: 10px;
                margin-bottom: 0px;
                border: 1px solid #ddd;
                border-radius: 4px;
                box-shadow: 0 1px 3px #ddd;
                background-color: #fff;
                .textHead{
                    margin: 15px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .right{
                        color: gray;
                    }
                    .left{
                        font-weight: bold;
                    }
                }
                .img{
                    margin: 0 10px;
                    margin-bottom: 10px;
                    height: 180px;
                    img{
                        width: 100%;
                        height: 100%;
                        border-radius: 5px;
                    }
                }
            }
            .no{
                margin-bottom: 10px;
            }
        }
    }
</style>
